<template>
  <button
    v-if="!isFloatingWindowVisible"
    class="floating-toggle-button"
    @click="toggleFloatingWindow"
  >
    打开控制窗
  </button>
  <div
    v-if="isFloatingWindowVisible"
    :class="{ 'floating-window': true, active: isFloatingWindowVisible }"
  >
    <!-- 悬浮窗内容 -->
    <!-- 右上角关闭按钮 -->
    <button class="close-button" @click="toggleFloatingWindow">&times;</button>
    <!-- ... 悬浮窗的其余内容 ... -->
    <div class="content">
      <div class="header">
        <div class="image-container">
          <img class="image" src="../assets/bluekuang.png" alt="Image" />
          <div class="title">天气信息雷达</div>
        </div>
      </div>
      <div class="iner">
        <div class="iner-in">
          <el-collapse >
            <el-collapse-item title="卫星云图" name="卫星云图">
              <template #title >
                <strong
                  style="display: block; text-align: center; font-size: 18px"
                  >卫星云图</strong
                >
              </template>
              <div class="content" >
                <div class="checkbox-grid">
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="卫星云图"
                    />
                    卫星云图
                  </label>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="iner-in">
          <el-collapse>
            <el-collapse-item
              title="雷暴大风识别与外推"
              name="雷暴大风识别与外推"
            >
              <template #title>
                <strong
                  style="display: block; text-align: center; font-size: 18px"
                  >雷暴大风识别与外推</strong
                >
              </template>
              <div class="content">
                <div class="checkbox-grid">
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="识别"
                    />
                    识别
                  </label>
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="外推"
                    />
                    外推
                  </label>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="iner-in">
          <el-collapse>
            <el-collapse-item title="风暴潮水淹预报" name="风暴潮水淹预报">
              <template #title>
                <strong
                  style="display: block; text-align: center; font-size: 18px"
                  >风暴潮水淹预报</strong
                >
              </template>
              <div class="content">
                <div class="checkbox-grid">
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="风暴潮"
                    />
                    风暴潮
                  </label>
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="水淹"
                    />
                    水淹
                  </label>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="iner-in">
          <el-collapse>
            <el-collapse-item title="雷达拼图" name="雷达拼图">
              <template #title>
                <strong
                  style="display: block; text-align: center; font-size: 18px"
                  >雷达拼图</strong
                >
              </template>
              <div class="content">
                <div class="checkbox-grid">
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="雷达拼图"
                    />
                    雷达拼图
                  </label>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="iner-in">
          <el-collapse>
            <el-collapse-item title="QPF" name="QPF">
              <template #title>
                <strong
                  style="display: block; text-align: center; font-size: 18px"
                  >QPF</strong
                >
              </template>
              <div class="content">
                <div class="checkbox-grid">
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="降水"
                    />
                    降水
                  </label>
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="DBZ"
                    />
                    DBZ
                  </label>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="iner-in">
          <el-collapse>
            <el-collapse-item title="QPE" name="QPE">
              <template #title>
                <strong
                  style="display: block; text-align: center; font-size: 18px"
                  >QPE</strong
                >
              </template>
              <div class="content">
                <div class="checkbox-grid">
                  <label class="radio-label">
                    <input
                      type="radio"
                      v-model="selectedOption"
                      name="stormRecognition"
                      value="QPE"
                    />
                    QPE
                  </label>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isFloatingWindowVisible: Boolean,
    floatingWindowPosition: String,
  },
  data() {
    return {
      isFloatingWindowVisible: false,
      selectedOption: "",
    };
  },
  computed: {
    menuItems() {
      return [
        { label: "卫星云图", link: "/yuntu" },
        { label: "识别", link: "/Recognition" },
        { label: "外推", link: "/Rectangle" },
        { label: "风暴潮", link: "/convectivegust" },
        { label: "水淹", link: "/strongrain" },
        { label: "雷达拼图", link: "/radarPic" },
        { label: "降水", link: "/Rainfall" },
        { label: "DBZ", link: "/Radar" },
        { label: "QPE", link: "/qpe" },
      ];
    },
  },
  watch: {
    selectedOption(newValue) {
      // 在menuItems数组中查找选项的链接
      const selectedItem = this.menuItems.find(
        (item) => item.label === newValue
      );
      if (selectedItem) {
        this.$router.push(selectedItem.link); // 使用选项的链接进行页面导航
      }
    },
  },
  methods: {
    toggleFloatingWindow() {
      this.isFloatingWindowVisible = !this.isFloatingWindowVisible;
    },
  },
};
</script>

<style scoped>
.floating-window {
  position: fixed;
  top: 30px;
  left: 20px;
  width: 270px;
  background-color: #f0f0f0;
  border-radius: 10px;
  border: 4px solid #007bff; /* 修改为深蓝色的边框 */
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s, transform 0.3s;
  padding: 20px;
}

.floating-window.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.content {
  padding: 10px;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.checkbox-grid label {
  font-weight: bold; /* 加粗文本 */
  font-size: 15px; /* 增大文本大小 */
  height: 0px;
}
button:hover {
  background-color: #0056b3;
}

.radio-label {
  margin-right: 20px; /* 调整单选按钮之间的间距 */
  font-size: 15px; /* 更改字体大小 */
}

/* 单选按钮选中状态的样式 */
input[type="radio"]:checked::before {
  background-color: #007bff;
}

/* 修改的布局样式 */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
}

.iner-in {
  margin-top: 5px;
  border-radius: 5px;
  border: 2px solid #007bff; /* 修改为深蓝色的边框 */
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.image {
  max-width: 100%;
  max-height: 100%;
}

.title {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px 10px;
  font-size: 16px;
  font-weight: bold;
}
.floating-toggle-button {
  position: fixed;
  bottom: 150px;
  left: 20px; /* 修改为 left 来放在左下角 */
  width: 100px; /* 设置按钮宽度为20px */
  padding: 10px; /* 调整按钮内部的内边距 */
  background-color: #fff; /* 背景色改为白色 */
  color: black; /* 将字体颜色设置为黑色 */
  border: 2px solid #007bff; /* 修改为深蓝色的边框 */
  border-radius: 5px;
  cursor: pointer;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  background-color: white; /* 将背景颜色设置为白色 */
  border: none;
  font-size: 20px;
  color: black; /* 将叉的颜色设置为黑色 */
  cursor: pointer;
}
</style>
